<template>
  <div class="g-rowb1">
    <div class="g-topb1">
      <div class="ll">
        <div class="g-titb1">
          <div class="h3">粮种信息</div>
        </div>
      </div>
      <div class="rr">
        <router-link to="/" class="g-btnb1">
          <img src="@img/b-i1.png" alt="" class="icn" />
          <span>返回首页</span>
        </router-link>
      </div>
      <img src="@img/b-line1.png" alt="" class="line" />
    </div>
    <div class="g-content jl-content">
      <div class="g-fillter">
        <div class="item">
          <div class="s">标题</div>
          <input type="text" class="inp" placeholder="请输入" />
        </div>
        <div class="item">
          <div class="s">发布人</div>
          <a-select
            ref="select"
            class="jl-selbox"
            v-model:value="value1"
            placeholder="请选择"
          >
            <a-select-option value="发布人1">发布人1</a-select-option>
            <a-select-option value="发布人2">发布人2</a-select-option>
            <a-select-option value="发布人3">发布人3</a-select-option>
          </a-select>
        </div>
        <div class="item">
          <div class="s">录入时间</div>
          <a-range-picker v-model:value="value2" separator="至" :bordered="false" />
        </div>
        <div class="opts">
          <div class="btn">
            <img src="@img/c-btn2.svg" alt="" />
          </div>
          <div class="btn"><img src="@img/c-btn3.png" alt="" /></div>
        </div>
      </div>
      <div class="m-tableb1 flex1 jl-table jl-tablesty2">
        <a-table
          bordered
          :dataSource="dataSource"
          :columns="columns"
          :scroll="{ x: 2000,y:620 }"
          :pagination="false"
          :row-class-name="
            (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
          "
          :row-selection="rowSelection"
        >
          <template #bodyCell="{ column,record }">
            <template v-if="column.dataIndex === 'img'">
              <div class="imgbox">
                <span class="pic"><img :src="record.img" alt="" /></span>
              </div>
            </template>
            <template v-if="column.dataIndex === 'type'">
              <div class="type">
                <span class="btn sty1" v-if="record.type==1">已发布</span>
                <span class="btn sty2" v-if="record.type==0">未发布</span>
              </div>
            </template>
            <template v-if="column.dataIndex === 'action'">
              <div class="actions">
                <a href="javascript:;" @click="showModal">编辑</a>
                <a href="javascript:;" v-if="record.type==1" @click="disableStatus(record)">撤销</a>
                <a href="javascript:;" v-if="record.type==0" @click="disableStatus(record)">发布</a>
                <a href="javascript:;" @click="showModal2">删除</a>
              </div>
            </template>
          </template>
        </a-table>
      </div>
      <div class="con-bot jl-conbot">
        <div class="l">
          <div class="selall" :class="selallType?'active':''" @click="selectall"><span></span>全选</div>
          <div class="add" @click="showModal"><span>+</span>新建</div>
          <div class="btn del" @click="showModal2"><span></span>删除</div>
        </div>
        <div class="r">
          <div class="g-pages">
            <a-pagination
              v-model:current="current"
              v-model:page-size="pageSize"
              :total="85"
              showQuickJumper
              :show-total="
                (total, range) =>
                  `显示${range[0]}到${range[1]} ,共 ${total} 条记录`
              "
            ></a-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
<!-- 新建/编辑弹窗start -->
<a-modal v-model:visible="visible" title="" @ok="handleOk" class="jl-pop" :centered="true" :footer="null">
	<div class="bg"><img src="@img/jl-bg03.png" alt="" /></div>
	<div class="pop-con">
		<div class="g-titb1">
			<div class="h3">新建粮种信息</div>
		</div>
		<div class="jl-form1">
			<div class="lab">标题</div>
			<div class="inp">
				<input type="text" placeholder="请输入标题" />
			</div>
			<div class="lab">介绍文本</div>
			<div class="txtarea">
				<textarea placeholder="请输入标题"></textarea>
			</div>
			<div class="jl-upPDF">
				<div class="lbox">
					<div class="tit">添加图片</div>
					<div class="uploadbox">
						<a-upload
						class="upload"
						v-model:file-list="fileList"
						name="file"
						action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
						listType="picture-card"
						:maxCount="1">
							<plus-outlined />
							<div class="upimg" v-if="fileList.length==0"><img src="@img/jl-i07.png" alt="" /></div>
						</a-upload>
					</div>
				</div>
			</div>
		</div>
		<div class="jl-action">
			<div class="btn sty1" @click="handleOk">取消</div>
			<div class="btn sty2" @click="handleOk">确定</div>
		</div>
	</div>
</a-modal>
<!-- 新建/编辑弹窗end -->
<!-- 删除弹窗start -->
<a-modal v-model:visible="visible2" title="" @ok="handleOk2" class="jl-pop" :centered="true" :footer="null">
	<div class="bg"><img src="@img/jl-bg04.png" alt="" /></div>
	<div class="pop-con">
		<div class="jl-form1">
			<div class="jl-removebox">
				<div class="icn"><img src="@img/jl-i11.png" alt=""></div>
				<div class="desc">确定要删除吗  弹窗说明文字</div>
			</div>
		</div>
		<div class="jl-action">
			<div class="btn sty1" @click="handleOk2">取消</div>
			<div class="btn sty2" @click="handleOk2">确定</div>
		</div>
	</div>
</a-modal>
<!-- 删除弹窗end -->
</template>

<script setup>
import { defineComponent, computed, toRefs, reactive, ref, onMounted } from 'vue';
import { Table } from 'ant-design-vue';
import { message } from 'ant-design-vue';

function getImageUrl (name) {
  return new URL(`../assets/images/${name}`, import.meta.url).href;
}
// 选择
const value1=ref();
const value2=ref();
// 新建/编辑弹窗
const visible = ref(false);
const fileList= ref([]);
function showModal(){
	visible.value=true;
};
function handleOk(){
	visible.value=false;
};
// 删除弹窗
const visible2 = ref(false);
function showModal2(){
	visible2.value=true;
};
function handleOk2(){
	visible2.value=false;
};

const current = ref(2);
const pageSize = ref(20);

const columns = [
  {
    title: '标题',
    dataIndex: 'tit',
    key: 'tit',
  },
  {
    title: '录入人',
    dataIndex: 'entry',
    key: 'entry',
  },
  {
    title: '图片',
    dataIndex: 'img',
    key: 'img',
  }, {
    title: '录入日期',
    dataIndex: 'date',
    key: 'date',
  }, {
    title: '状态',
    dataIndex: 'type',
    key: 'type',
  }, {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    fixed: 'right'
  },
];

const dataSource = ref([
  {
    key: '1',
    tit: '金华两头乌猪',
    entry: '卓文君',
    img:getImageUrl('jl-p01.jpg'),
    date: '2023/10/16',
    type: 1
  },
  {
    key: '2',
    tit: '金华两头乌猪',
    entry: '蔡文姬',
    img:getImageUrl('jl-p01.jpg'),
    date: '2023/10/16',
    type: 1
  },
  {
    key: '3',
    tit: '金华两头乌猪',
    entry: '李清照',
    img:getImageUrl('jl-p01.jpg'),
    date: '2023/10/16',
    type: 1
  },
  {
    key: '4',
    tit: '金华两头乌猪',
    entry: '上官婉儿',
    img:getImageUrl('jl-p01.jpg'),
    date: '2024/08/10',
    type: 1
  },
  {
    key: '5',
    tit: '金华两头乌猪',
    entry: '王丹妮',
    img:getImageUrl('jl-p01.jpg'),
    date: '2023/08/20',
    type: 1
  },
  {
    key: '6',
    tit: '金华两头乌猪',
    entry: '王丹妮',
    img:getImageUrl('jl-p01.jpg'),
    date: '2023/08/20',
    type: 1
  },
  {
    key: '7',
    tit: '金华两头乌猪',
    entry: '王丹妮',
    img:getImageUrl('jl-p01.jpg'),
    date: '2023/08/20',
    type: 1
  },
]);

const RowKeys = ref([]);
const rowSelection = {
	selectedRowKeys: RowKeys,
	onChange: (selectedRowKeys,selectedRows) => {
		RowKeys.value=selectedRowKeys;
	},
	onSelectAll: (selected, selectedRows, changeRows)=>{
		selallType.value=selected;
	}
};
const selallType=ref(false);
function selectall(){
	if(selallType.value){
		selallType.value=false;
		RowKeys.value=[];
	}else{
		selallType.value=true;
		RowKeys.value=dataSource.value.map(pro => pro.key);
	}
}

function disableStatus(record) { 
  console.log(record);
  const index = dataSource.value.indexOf(record);
  dataSource.value[index].type = record.type === 0 ? 1 : 0;
  message.success('操作成功');
 }
 
onMounted(() => {
});


</script>

<style>
</style>